<template>
  <el-card class="bottomCard">
    <span>用户管理</span>

    <!-- 表格 -->
    <el-table :data="userData"
              border
              style="width: 100%">
      <el-table-column label="#"
                       type="index">
      </el-table-column>
      <el-table-column prop="username"
                       label="用户名">
      </el-table-column>
      <el-table-column prop="password"
                       label="密码">
      </el-table-column>
      <el-table-column prop="phone"
                       label="电话">
      </el-table-column>
      <el-table-column label="操作">
        <i class="el-icon-view blue"></i>
        <i class="
             el-icon-edit-outline green"></i>
        <i class="el-icon-delete red"></i>
      </el-table-column>
    </el-table>

    <!-- 页码 -->
    <el-pagination background
                   layout="prev, pager, next"
                   :total="4"
                   :page-size="2">
    </el-pagination>
  </el-card>
</template>

<script>
import { getUserData } from '../../network/user.js';
export default {
  name: 'User',
  data () {
    return {
      userData: []
    }
  },
  created () {
    this.getUser();
  },
  methods: {
    async getUser () {
      const res = await getUserData();
      if (res.status !== 200) {
        return this.$message.error('获取用户列表失败!');
      }
      this.userData = res.data;
      console.log(this.userData);
    },
  },
}
</script>

<style scoped>
.bottomCard span {
  font-size: 20px;
}

.el-table {
  margin-top: 30px;
}

.el-table-column {
  height: 67px;
}

.el-table i {
  font-size: 20px;
  margin-right: 50px;
}

.el-pagination {
  float: right;
  margin: 20px 0 20px 0;
}
</style>